<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05_商品列表练习</title>
</head>
<body>
    <input type="text" placeholder="请输入商品名称">
    <input type="text" placeholder="请输入商品价格">
    <input type="text" placeholder="请输入商品数量">
    <button onclick="addEmp()">点我添加</button>
    <table border="1">
        <tr>
            <th>商品名称</th>
            <th>商品价格</th>
            <th>商品数量</th>
        </tr>
        <tr>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
        </tr>
        </table>
    <script>
        const arr=[
            {title:"小米手机",price:5000,num:100},
            {title:"华为手机",price:6000,num:200},
            {title:"苹果手机",price:8000,num:300},
            {title:"三星手机",price:8000,num:400},
            {title:"OPPO手机",price:9000,num:500}
        ]
        for(let i=0;i<arr.length;i++){
            let trE = document.createElement('tr');
            let titleTd = document.createElement('td');
            titleTd.innerHTML = arr[i].title;
            let priceTd = document.createElement('td');
            priceTd.innerHTML = arr[i].price;
            let numTd = document.createElement('td');
            numTd.innerHTML = arr[i].num;
            trE.append(titleTd,priceTd,numTd);
            let tableE = document.querySelector('table');
            tableE.append(trE);
        }
        function addEmp(){
            let uTitle = document.querySelector('input[placeholder="请输入商品名称"]').value;
            let uPrice = document.querySelector('input[placeholder="请输入商品价格"]').value;
            let uNum = document.querySelector('input[placeholder="请输入商品数量"]').value;
            if(!uTitle || !uPrice || !uNum){
                alert('请填写完整信息');
                return;
            }
            let trE = document.createElement('tr');
            let titleTd = document.createElement('td');
            titleTd.innerHTML = uTitle;
            let priceTd = document.createElement('td');
            priceTd.innerHTML = uPrice;
            let numTd = document.createElement('td');
            numTd.innerHTML = uNum;
            trE.append(titleTd,priceTd,numTd);
            let tableE = document.querySelector('table');
            tableE.append(trE);
            document.querySelectorAll('input').forEach(function (item) {
                item.value = '';
            })
            arr.push({
                title:uTitle,
                price:uPrice,
                num:uNum
            })
            console.log(arr);
        }
    </script>
</body>
</html>